<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>商品添加</title>
</head>
<style>
    .layui-input-block {
        width: 160px;
    }
</style>
<body class="layui-card-body layui-card">
<div th:replace="fragment/js::js"></div>
<script type="text/javascript" th:src="@{/js/wangEditor/wangEditor.js}"></script>
<script type="text/javascript" th:src="@{/js/upload/upload.js}"></script>

<div>
    <div>
        <form class="layui-form" id="addGoodsForm" lay-filter="addGoodsForm">
            <div style="display: flex">
                <div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品类型</label>
                        <div class="layui-input-block">
                            <select name="goodsTypeId" class="layui-select" lay-verify="required">
                                <option th:each="t:${goodsTypes}" th:value="${t.goodsTypeId}"
                                        th:text="${t.typeName}"></option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" id="goodsTitle" placeholder="请输入商品名称" required lay-verify="required"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品副标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="subTitle" placeholder="请输入商品副标题"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="sort" placeholder="请输入排序编号"
                                   oninput="value=value.replace(/[^\d]/g,'')" value="1"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品原价</label>
                        <div class="layui-input-block">
                            <input type="text" name="oldPrice" placeholder="请输入商品原价" required
                                   lay-verify="required|number"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品现价</label>
                        <div class="layui-input-block">
                            <input type="text" name="nowPrice" placeholder="请输入商品现价" required
                                   lay-verify="required|number"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">包装费</label>
                        <div class="layui-input-block">
                            <input type="text" name="packagingFee" placeholder="请输入包装费" required
                                   lay-verify="required|number" value="0"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品重量</label>
                        <div class="layui-input-block">
                            <input type="text" name="weight" placeholder="请输入商品重量" required
                                   lay-verify="required|number" value="0.1"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品口味</label>
                        <div class="layui-input-block">
                            <input type="text" name="taste" placeholder="请输入商品口味"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品主图</label>
                        <div class="layui-input-block">
                            <div lh-upload id="pic"></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">库存</label>
                        <div class="layui-input-block">
                            <input type="text" name="stock" placeholder="请输入商品库存" value="1000"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div style="margin-left: 20px;flex: 1;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否在售</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="onSale" value="1" checked lay-skin="switch" lay-text="在售|停售">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">能否外卖</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="takeaway" value="1" checked lay-skin="switch" lay-text="能够|不能">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">团购商品</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="isCoupon" value="1" lay-skin="switch" lay-text="团购|外卖">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品轮播图</label>
                        <div>
                            <div lh-upload id="imgs"></div>
                        </div>
                    </div>

                    <div>
                        <label>商品详情</label>
                    </div>
                    <div id="wangEdit" style="width: 80%">
                    </div>
                    <div style="padding: 10px 0">
                        <button class="layui-btn " lay-submit lay-filter="addGoodsForm">确认添加</button>
                        <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="button" onclick="window.history.go(-1)" class="layui-btn layui-btn-danger">取消</button>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        // 富文本
        var E = window.wangEditor;
        var editor = new E('#wangEdit')
        // 使用 base64 保存图片
        // editor.customConfig.uploadImgShowBase64 = true
        // 使用路径传参
        editor.customConfig.uploadImgParamsWithUrl = true
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = '/pages/back/upload/wangEditorUploadFiles';
        editor.create();

        layui.use(['form', 'layer'], function () {
            var layer = layui.layer;
            var form = layui.form;
            uploadFile({
                dir: 'goods',// 将这些图片保存到商品文件夹
            });// 一定要
            // 监听表单事件
            form.on('submit(addGoodsForm)', function (data) {
                console.log(data)
                data.field.detail = editor.txt.html();
                if (data.field.pic == undefined) {
                    layer.msg("主图还是需要上传的")
                    return false;
                }
                $.post('/pages/back/goods/add', data.field, function (res) {
                    layer.msg(res.msg);
                    if(res.res){
                        // $("#goodsTitle").val('');
                        $("#reset").click()
                        layer.msg("提交成功")
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

        });
    })


</script>
</body>
</html>
